<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>评价打分</title>

		<style>
			.content{
				padding: 25px 0px;
				background-color: #f8f8f8;
			}
			/* top */
			.top p{
				margin-bottom: 10px;
				text-align: center;
			}
			.teacher-avatar{
				width: 60px;
				height: 60px;
				margin: 10px auto;
			}
			.teacher-avatar img{
				display: block;
				width: 60px;
				height: 60px;
				background-size: 100% 100%;
				border: none;
				border-radius: 50%;
			}
			p.discr,
			p.evalu{
				font-size: 16px;
			}
			p.addr{
				font-size: 13px;
			}
			/* stars */
			ul.evaluate{
				margin-top: 20px;
			}
			ul.evaluate li{
				text-align: center;
				padding: 15px 0;
			}
			ul.evaluate li div{
				display: inline-block;
			}
			ul.evaluate .left{
				font-size: 18px;
				vertical-align: super;
				margin-right: 20px;
			}
			.star{
				display: inline-block;
				width: 25px;
				height: 25px;
				margin: 0 5px;
				background-size: 100% 100%;
			}
			.stars .unselect{
				background-image: url(../images/icons/star_rate_uns.png);
			}
			.stars .select{
				background-image: url(../images/icons/star_rate_s.png);
			}
			/* evaluate-items */
			.evaluate-items{
				padding: 0 15px;
				margin-top: 10px;
			}
			.evaluate-items li{
				position: relative;
				margin-bottom: 10px;
				padding: 5px 0;
				font-size: 14px;
				color: #b4b4b4;
			}
			.evaluate-items li span{
				position: absolute;
				top: 4px;
				right: 0px;
				display: inline-block;
				width: 20px;
				height: 20px;
				background-size: 100% 100%;
			}
			.evaluate-items li .unselect{
				background-image: url(../images/icons/unselect.png);
			}
			.evaluate-items li .select{
				background-image: url(../images/icons/select.png);
			}
			/* finish-btn */
			.finish-btn{
				position: fixed;
				bottom: 15px;
				left: 2.5%;
				right: 2.5%;
				display: block;
				width: 95%;
				height: 35px;
				margin: 0 auto;
				background-color: #53ceca;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				text-align: center;
				line-height: 35px;
				color: #fff;
				font-size: 16px;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="top">
				<p class="discr">对这家场馆满意吗？</p>
				<div class="teacher-avatar">
					<img src="../images/1.png" alt="">
				</div>
				<p class="evalu">朝阳公园会馆</p>
				<p class="taddr">朝阳公园南路1号网球中心</p>
			</div>
			<ul class="evaluate">
				<li>
					<div class="left">环境</div>
					<div class="stars">
						<span class="star select"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
					</div>
				</li>
				<li>
					<div class="left">服务</div>
					<div class="stars">
						<span class="star select"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
					</div>
				</li>
				<li>
					<div class="left">教学</div>
					<div class="stars">
						<span class="star select"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
						<span class="star unselect"></span>
					</div>
				</li>
			</ul>
			<ul class="evaluate-items">
				<li>这节课好棒啊，推荐哦<span class="unslect select"></span></li>
				<li>没想到瑜伽这么累，出了好多汗挺爽的<span class="unselect"></span></li>
				<li>没什么感受，可能刚开始习练吧<span class="unselect"></span></li>
			</ul>
			<button class="finish-btn" type="button">完成</button>
		</div>
	</body>
</html>